<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script lang="ts" setup name="index">
import { Graph } from '@antv/x6'

const testGraph = () => {
  const graph = new Graph({
    container: (document.getElementById('container') as HTMLElement),
    grid: true,
  })

  let groupObj = {
    markup: [
      {
        tagName: 'circle',
        selector: 'circle',
      }
    ],
    attrs: {
      circle: {
        r: 6,
        magnet: true,
        stroke: '#31d0c6',
        fill: '#31d0c6',
        strokeWidth: 2,
      },
      text: {
        fontSize: 12,
        fill: 'red',
      },
    }
  }

  const rect = graph.addNode({
    x: 100,
    y: 60,
    width: 60,
    height: 100,
    attrs: {
      body: {
        fill: '#f5f5f5',
        stroke: '#d9d9d9',
        strokeWidth: 1,
      },
    },
    ports: {
      groups: {
        leftGroup: Object.assign({
          position: {
            name: 'left',
          }
        }, groupObj
        ),
        rightGroup: Object.assign({
          position: {
            name: 'right',
          }
        }, groupObj
        )
      },
      items: [
        {
          id: 'port1', group: 'leftGroup', attrs: {
            text: {
              text: 'port1', // 标签文本
            },
          },
        },
        { id: 'port2', group: 'leftGroup' },
        { id: 'port4', group: 'rightGroup' },
        { id: 'port5', group: 'rightGroup' },
        { id: 'port6', group: 'rightGroup' },
      ],
    },
  })

  rect.addPort({ id: 'port3', group: 'leftGroup' })
  rect.portProp('port4', {
    attrs: {
      circle: { stroke: 'red', fill: '#fff' },
    },
  })
}

setTimeout(() => {
  testGraph()
}, 300)
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>
